<template>
  <splitpanes class="default-theme">
    <pane size="20" :min-size="0" max-size="100">
      <div style="height: 40px;text-align: center;line-height: 32px;">
        <el-button type="text" @click="settingApp">应用设置-{{ appInfo.callCmd }}</el-button>
      </div>
      <el-tabs v-model="leftActive" tab-position="left" style="height: calc(100vh - 190px)">
        <el-tab-pane  v-for="collapse in collapses" :key="collapse.name" :name="collapse.name" :label="collapse.label" lazy>
          <app-method-table v-if="collapse.name === 'method'" :ref="collapse.name" @rowClick="(row) => { refClick(row, collapse)}"></app-method-table>
          <app-schema-table v-else-if="collapse.name === 'schema'" :ref="collapse.name" @rowClick="(row) => { refClick(row, collapse)}"></app-schema-table>
          <app-dict-table v-else-if="collapse.name === 'dict'" :ref="collapse.name" @rowClick="(row) => { refClick(row, collapse)}"></app-dict-table>
          <app-rule-table v-else-if="collapse.name === 'rule'" :ref="collapse.name" @rowClick="(row) => { refClick(row, collapse)}"></app-rule-table>
          <app-model-table v-else-if="collapse.name === 'model'" :ref="collapse.name" @rowClick="(row) => { refClick(row, collapse)}"></app-model-table>
          <app-view-table v-else-if="collapse.name === 'view'" :ref="collapse.name" @rowClick="(row) => { refClick(row, collapse)}"></app-view-table>
          <app-view-table v-else-if="collapse.name === 'view'" :ref="collapse.name" @rowClick="(row) => { refClick(row, collapse)}"></app-view-table>
          <app-process-table v-else-if="collapse.name === 'process'" :ref="collapse.name" @rowClick="(row) => { refClick(row, collapse)}"></app-process-table>
          <app-request-table v-else-if="collapse.name === 'request'" :ref="collapse.name" @rowClick="(row) => { refClick(row, collapse)}"></app-request-table>
          <app-report-template v-else-if="collapse.name === 'report'" :ref="collapse.name" @rowClick="(row) => { refClick(row, collapse)}"></app-report-template>
        </el-tab-pane>
      </el-tabs>
    </pane>
    <pane size="80" :min-size="0" max-size="100">
      <h3 v-if="tabs.length === 0">未打开设置</h3>
      <el-tabs v-else v-model="tabActiveName" closable type="border-card" @tab-remove="removeTab">
        <el-tab-pane v-for="item in tabs" :key="item.key" :name="item.key" :label="item.label" lazy>
          <method-info v-if="item.type === 'method'" :method-id="item.data.methodId" />
          <app-schema-info v-else-if="item.type === 'schema'" :app-table="item.data" @refreshTab="(row) => { refreshTab(item,row)}"/>
          <app-dict-info v-else-if="item.type === 'dict'" :dict-info="item.data" />
          <model-info v-else-if="item.type === 'model'" :model-info="item.data" @refreshTab="(row) => { refreshTab(item,row)}" />
          <view-info v-else-if="item.type === 'view'" :view-id="item.data.viewId" />
          <process-info v-else-if="item.type === 'process'" :process-info="item.data" />
          <request-info v-else-if="item.type === 'request'" :request="item.data" />
          <app-seting v-else-if="item.type === 'app'" />
          <template-info v-else-if="item.type === 'report'" :template="item.data" />
          <app-max-table v-else-if="item.type === 'rule'" :model-rule="item.data" />
        </el-tab-pane>
      </el-tabs>
    </pane>
  </splitpanes>
</template>

<script>
import {Pane, Splitpanes} from "splitpanes";
import MethodInfo from "@/views/system/method/MethodInfo";
import AppMethodTable from "@/views/system/app/method/AppMethodTable";
import AppModelTable from "@/views/system/app/model/AppModelTable";
import AppViewTable from "@/views/system/app/view/AppViewTable";
import ModelInfo from "@/views/system/model/ModelInfo";
import ViewInfo from "@/views/system/view/ViewInfo";
import ProcessInfo from "@/views/system/process/ProcessInfo";
import AppProcessTable from "@/views/system/app/process/AppProcessTable";
import AppRequestTable from "@/views/system/app/request/AppRequestTable";
import AppSeting from "@/views/system/app/AppSeting";
import RequestInfo from "@/views/system/request/RequestInfo";
import AppSchemaTable from "@/views/system/app/schema/AppSchemaTable";
import AppSchemaInfo from "@/views/system/app/schema/AppSchemaInfo";
import AppDictTable from "@/views/system/app/dict/AppDictTable";
import AppDictInfo from "@/views/system/app/dict/AppDictInfo";
import AppRuleTable from "@/views/system/app/rule/AppRuleTable";
import AppMaxTable from "@/views/system/app/rule/AppMaxTable";
import AppReportTemplate from "@/views/system/app/report/AppReportTemplate";
import TemplateInfo from "@/views/system/report/TemplateInfo";

export default {
  name: "AppInfo",
  components: {
    TemplateInfo,
    AppReportTemplate,
    AppMaxTable,
    AppRuleTable,
    AppDictInfo,
    AppDictTable,
    AppSchemaInfo,
    AppSchemaTable,
    RequestInfo,
    AppSeting,
    AppRequestTable,
    AppProcessTable,
    ProcessInfo,
    ViewInfo,
    ModelInfo, AppViewTable, AppModelTable, AppMethodTable, MethodInfo, Splitpanes, Pane},
  provide() {
    return {
      appInfo: this.appInfo,
      appContext: this.appContext
    }
  },
  props: {
    appInfo: {
      type: Object,
      default: function () {
        return undefined
      }
    }
  },
  data() {
    return {
      tabActiveName: '',
      leftActive: 'schema',
      collapses: [
        { name: 'schema', label: '数据库表' },
        { name: 'dict', label: '数据字典' },
        { name: 'rule', label: '字段规则' },
        { name: 'model', label: '业务模型' },
        { name: 'view', label: '业务视图' },
        { name: 'process', label: '业务流程' },
        { name: 'method', label: '逻辑函数' },
        { name: 'report', label: '报告模板' },
        { name: 'request', label: '外部请求' }
      ],
      tabs: [],
      appContext: {
        allDbs: [],
        allStores: [],
        envObj: {},
        envs: []
      }
    }
  },
  created() {
    this.settingApp()
  },
  methods: {
    getKey(row, collapse){
      if (row.jdbcName) {
        return `${row.jdbcName}(${collapse.label})`
      } else if (row.templateName) {
        return `${row.templateName}(${collapse.label})`
      }
      return `${row.callCmd}(${collapse.label})`
    },
    refClick(row, collapse) {
      const key = this.getKey(row,collapse)
      const index = this.tabs.findIndex(item => item.key === key)
      if (index < 0) {
        this.tabs.push({ key: key, label: key ,data: row, type: collapse.name })
      }
      this.tabActiveName = key
    },
    removeTab(key) {
      const index = this.tabs.findIndex(item => item.key === key)
      if (index > -1) {
        const tab = this.tabs[index]
        if (tab.type === 'app') {
          this.$resultMsg(this, { msg: '应用页不能关闭'})
        } else {
          this.tabs.splice(index, 1)
          if (this.tabs.length > 0) {
            this.tabActiveName = this.tabs[0].key
          }
        }
      }
    },
    settingApp() {
      this.refClick(this.appInfo, { name: 'app', label: '应用'})
    },
    refreshTab(tab, row) {
      const collapse = this.collapses.find(item => item.name === tab.type)
      tab.key = this.getKey(row,collapse)
      tab.label = tab.key
      this.$Util.cleanObj(this, tab.data)
      this.$Util.copyAttr(row, tab.data,null,this)
      this.tabActiveName = tab.key
      if (this.$refs[tab.type] && this.$refs[tab.type][0].refreshTable) {
        this.$refs[tab.type][0].refreshTable()
      }
    }
  }
}
</script>

<style scoped>

</style>
